<template>
  <div class="home">
    <!-- 头部 -->
    <van-nav-bar fixed z-index="1000" placeholder title="小莱电影" />
    <!--  banner -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item._id">
        <van-image width="100%" height="120" :src="item.img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 定位 -->
    <div class="home-tab-bar">
      <!--  定位 -->
      <div class="location" @click="$router.push('/city')">
        <svg class="xl-icon" aria-hidden="true">
          <use xlink:href="#icon-dingwei"></use>
        </svg>
        <span>{{ shopName }}</span>
        <svg class="xl-icon arrow" aria-hidden="true">
          <use xlink:href="#icon-xiangxia1"></use>
        </svg>
      </div>

      <!--   右侧 tabs -->
      <div class="home-tab-bar-right">
        <van-tabs v-model="tabActive" title-active-color="#DB281F" @click="changeTab">
          <van-tab title="在售"></van-tab>
          <van-tab title="即映"></van-tab>
        </van-tabs>
      </div>
    </div>
  <!--  -->

  <div v-if="status=='loaded'">

  <div class="films-list">
      <div class="films-item" v-for="item in filmsList" :key="item._id" @click="$router.push(`/filmsIntro?filmsId=${item._id}`)">
        <div class="films-item-img">
           <img :src="item.img" alt="">
        </div>
        <div class="films-item-content">
          <div class="title">
               {{item.name}}
          </div>
          <div class="formats">
            <div class="label" v-for="(item2,index) in item.formats" :key="index">
              {{item2|formats(0)}} <span>{{item2|formats(1)}}</span>
            </div>
          </div>
                <div class="score">
                   {{item.score}}分
            </div>
            <div class="desc">
                 {{item.stage}}
            </div>

        </div>
        <div class="films-item-btn">
           <van-button v-if="item.status==1"  @click.stop="$router.push(`/filmsOrder?filmsId=${item._id}`)"  round size="small" color="#DB281F">购票</van-button>
             <div  class="like" v-else>
              <div><van-icon name="like-o" /> </div>
              <div>想看</div>
             </div>
           
        </div>

      </div>
    </div>


  </div>
  
 
    <!-- 加载中 -->
    <div v-if="status == 'loading'" class="text-center">
      <van-loading type="spinner" color="#DB281F" />
    </div>

    <!-- 空 -->
    <!-- status -->
    <van-empty v-if="status == 'empty'" image="search" description="暂无门店" />
  </div>
  
  </div>
</template>

<script>
// @ is an alias to /src
import { Swipe, SwipeItem } from "vant";
import mixin from "@/common/mixin";
import { Empty, Loading } from "vant";
export default {
  name: "HomeView",
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
     [Loading.name]: Loading,
    [Empty.name]: Empty,
  },
  mixins: [mixin],
  data() {
    return {
      cityName: "",
      bannerList: [],
      tabActive: 0,
      shopName: "加载中...",
      shopId: "",
      filmsList: [],
      status: "loading",
    };
  },
  filters:{
    formats(val,index){  
      // console.log(val)
       return val.split('-')[index]
    }
  },
  mounted() {
    this.getBanner();
  },
  async activated() {
    let { shopName, shopId } = localStorage; //  兼容性未知

    console.log(this)

    if (shopId) {
      // 证明选择过店铺
      this.shopName = shopName;
      this.shopId = shopId;
      this.getFilmsList();
    } else {
      //  假设 我是第一次进来  我原来没选择过店铺
      // 1. 定位  拿到我所在的 城市

      let cityName = await this.getLocation();
      console.log(cityName);
      // 全国
      if (cityName === "全国" || !cityName) {
        this.$toast("定位失败,请手动选择");
        setTimeout((v) => {
          this.$router.push("/city");
        }, 1500);
        return;
      }

      // 2. 根据城市获取店铺
      // cityName = "南阳";

      let { code: statusCode, rows, msg } = await this.getShopList(cityName);
      if (statusCode !== 0) {
        this.$toast(msg); //
        return;
      }
      //  如果没店铺
      if (rows.length === 0) {
        this.$dialog
          .confirm({
            title: "温馨提示",
            message: `定位城市${cityName}没有门店,是否手动选择?`,
          })
          .then(() => {
            this.$router.push("/city");
          })
          .catch(() => {
            this.status = "empty";
          });
        return;
      }

      // 如果有数据
      // 3. 弹出弹窗
      // 定位到您在XX  是否切换到XX店
      shopName = rows[0].name;
      shopId = rows[0]._id;

      this.$dialog
        .confirm({
          title: "温馨提示",
          message: `当前定位为${cityName},是否切换为【${shopName}】影院?`,
        })
        .then(() => {
          //   确定->
          //  存一下  shopName shopId shopInfo
          //  获取到信息
          //      最后调
          //   this.getFilmsList()
          localStorage.setItem("shopName", shopName);
          localStorage.setItem("shopId", shopId);
          localStorage.setItem("shopInfo", JSON.stringify(rows[0]));

          this.shopName = shopName;
          this.shopId = shopId;
          this.getFilmsList();
        })
        .catch(() => {
          //  点击取消  让你去手动选
          //  如果点了取消
          //  跳到城市页面 让用户手动选
          this.$router.push("/city");
        });
    }
  },
  methods: {
    getBanner() {
      this.$http.get("/banner/pub/getList").then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.bannerList = res.rows;
        }
      });
    },
    // 获取电影列表
    getFilmsList() {
      let { shopId,tabActive } = this;
      let status = 1;
      if(tabActive ==1){
        //  状态是即将上映
        status = 2;
      }

      // 0   1   前端
      // 1   2   后端
      this.$http
        .get("/films/pub/getList", {
         params:{
            shopId,
            status
         }
        })
        .then((res) => {
          console.log(res);

          this.filmsList = res.rows;
          if(this.filmsList.length){
            this.status = 'loaded'
          }else{
             this.status = 'empty'
          }
        });
    },
    //  获取店铺
    getShopList(city) {
      return this.$http.get(`/shop/pub/getList?city=${city}`);
    },
    //  tab切换
    changeTab(item){

        console.log(this.tabActive)
        this.getFilmsList()
             
    }
  },
};
</script>
<style lang="less" scoped>
// .home ::v-deep .van-nav-bar{
//   background: green;
// }


.home-tab-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 10px;

  .location {
    .xl-icon {
      color: #aaa;
      font-size: 20px;
    }
    .arrow {
      font-size: 14px;
    }
    span {
      font-size: 15px;
      margin: 0 5px;
    }
  }
  &-right {
    width: 100px;
  }
}


//  films-list
.films-list{
  padding-left:10px;
  padding-top: 10px;

}

.films-item{
  display: flex;
  // justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding: 5px 5px 5px 0;
  &-img{
    width: 68px;
    height: 95px;
    img{
        width: 68px;
      height: 95px;
    }
  }
  &-content{
    padding:0 8px;
    width: 220px;
    .score,.desc{
      color: #999;
      font-size: 12px;
      margin-top: 3px;
    }
    .desc{
      overflow: hidden;
      text-overflow: ellipsis;
       white-space: nowrap;
    }
    .title{
      font-size: 16px;
      // font-weight: bold;
      line-height: 24px;
    }
    .formats{
      overflow: hidden;
        .label{
          display: block;
          background: rgba(147,145,170,1);
          border-radius: 2px;
          padding: 2px;
          float: left;
          color: #fff;
          font-size: 10px;
          transform: scale(0.85);
          span{
             color:rgba(147,145,170,1);
             background: #fff;
             padding: 0 1px;
             border-radius: 2px;
          }
        }
    }
  }
  &-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    .like{
      display: flex;
      height: 30px;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

  }
}
</style>
